<!-- 确认支付-->
<template>
  <sn-three-col-space
      :side-content="5"
      :content="14"
      class="margin-top-20">
    <div slot="spaceContent">
      <!-- 定时器-->
      <count-down class="margin-top-20"/>
      <el-divider/>
      <!-- 支付项目信息-->
      <sn-row-has-two-col :left="19" :right="5">
        <div slot="one-col">
          <span class="item-des">
            项目: Future电影-订单编号:
          </span>
          <span>
            {{ $store.getters.getOrderNum }}
          </span>
        </div>
        <div slot="two-col">
          <span class="money-description">
            应付金额 : ￥
          </span>
          <span class="money">
            {{ $store.getters.getActualMoney }}
          </span>
        </div>
      </sn-row-has-two-col>
      <el-divider/>
      <!-- 支付宝支付-->
      <div class="to-flex float-right">
        <el-button
            @click="toAlipay"
            style="width: 200px"
            class="margin-top-20"
            round type="danger">
          使用支付宝去付款
        </el-button>
      </div>
    </div>
  </sn-three-col-space>
</template>

<script>
import CountDown from "@/components/common/sn/count_down/CountDown";

export default {
  name: "EnsurePay",
  components: {
    CountDown
  },
  data() {
    return {
      form: ``
    }
  },
  methods: {
    //使用支付宝支付
    toAlipay() {
      this.$http({
        url: `/web/order/aliPayOrder/${this.$store.getters.getOrderNum}`,
        method: 'get',
      }).then(({data}) => {
        let div = document.createElement('div')
        div.innerHTML = data
        document.body.appendChild(div)
        //执行submit表单提交，让页面重定向，跳转到支付宝页面F
        document.forms[0].submit()
      })
    }
  },
}
</script>

<style scoped>
.money-description {
  color: pink;
  font-size: 16px;
  position: relative;
  bottom: 7px;
}

.money {
  font-size: 25px;
  color: pink;
  font-weight: bold;
  position: relative;
  bottom: 4px;
}

.item-des {
  font-size: 16px;
  color: #999;
}

.alipay {
  margin-top: 20px;
  color: orange;
  font-size: 20px;

}
</style>